<template>
  <div class="article-container">
    <!-- 筛选表单容器 -->
    <el-card>
      <!-- 头部 -->
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <!-- 表单 -->
      <el-form ref="form" :model="form">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <!-- 单选框
                label: 给v-model关联用的
                插槽的内容是给用户看的
               -->
            <el-radio
              v-for="(obj, index) in statusList"
              :key="index"
              :label="obj.id"
              >{{ obj.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.channel_id" placeholder="请选择频道">
            <el-option label="全部" :value="null"></el-option>
           <el-option
                   v-for="item in channelList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
                   >
        </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dataFn"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格数据容器 -->
 <el-card style="margin-top:20px">
    <template #header>
   <h3>根据筛选条件共查询到{{total}} 条结果：</h3>
    </template>
    <!-- 表格 -->
    <el-table :data="articleList">
    <el-table-column prop="cover" width="150px" label="封面">

       <template #default="KD">
            <img
              width="100%"
              v-if="KD.row.cover.images.length > 0"
              :src="KD.row.cover.images[0]"
              alt="cover"
            />
            <span v-else>无图</span>
          </template>
    </el-table-column>
    <el-table-column prop="title"  width="120px" label="标题"></el-table-column>
    <el-table-column   width="120px" label="状态">
       <template #default="KD">
            <el-tag :type="getArticleStatus(KD.row.status).type">{{
              getArticleStatus(KD.row.status).name
            }}</el-tag>
          </template>
    </el-table-column>
    <el-table-column prop="pubdate"  width="120px" label="发布时间"></el-table-column>
    <el-table-column prop="read_count"  width="120px" label="阅读数"></el-table-column>
    <el-table-column prop="comment_count"  width="120px" label="评论数"></el-table-column>
    <el-table-column prop="like_count"  width="120px" label="点赞数"></el-table-column>

      <el-table-column label="操作" width="120px">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit"
             circle
              plain
              @click="$router.push(`/layout/publish?targetId=${scope.row.id}`)"
              >

            </el-button>
            <el-button @click="deleteArticle(scope.row)"  type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>

</el-table>
    <!-- 分页 -->
    <el-pagination
               background
        :current-page="currentPage4"
        :page-sizes="[2, 4, 8, 10]"
        :page-size="form.per_page"
        layout="prev, pager, next, sizes,  jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
</el-pagination>
</el-card>
  </div>
</template>

<script>
import { ARTICLE_STATUS_LIST } from '@/constant'
import { getAllChannelListAPI, getArticleListAPI, delArticleAPI } from '@/api/Article'
export default {
  name: 'Article',
  data () {
    return {
      // 文章状态列表
      statusList: ARTICLE_STATUS_LIST,
      value1: '',
      currentPage4: 4,
      form: {
        status: null, // 状态
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null,
        page: 1,
        per_page: 4
      },
      dateArr: [], // 装起始时间, 和结束时间
      articleList: [], // 数据源
      channelList: [],

      total: 0 // 数据总数
    }
  },
  methods: {
    getArticleStatus (status) {
      // findIndex版本
      // const index = ARTICLE_STATUS_LIST.findIndex((obj) => obj.id === status)
      // if (index !== -1) {
      //   return ARTICLE_STATUS_LIST[index]
      // }
      // 等同于
      // find版本
      const el = ARTICLE_STATUS_LIST.find((obj) => obj.id === status)
      if (el !== undefined) {
        return el
      }
    },
    onSubmit () {
      console.log('submit!')
      this.getArticleList()
    },
    dataFn (value) {
      // console.log(value)
      // this.form.begin_pubdate = value[0]
      // this.form.end_pubdate = value[1]
      ;[this.form.begin_pubdate, this.form.end_pubdate] = value
    },
    async  getArticleList () {
      const resq = await getArticleListAPI(this.form)
      // console.log(resq)
      const { results, total_count } = resq.data.data
      this.articleList = results
      this.total = total_count
      if (this.form.page > 1 && !results.length) {
        this.form.page--
        this.getArticleList()
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.form.per_page = val
      this.getArticleList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.form.page = val
      this.getArticleList()
    },
    async deleteArticle (obj) {
      try {
        await this.$confirm('不爱了么?要把我抛弃了么?', '傻蛋', {
          type: 'warning'
        })
        await delArticleAPI({ artId: obj.id })
        this.getArticleList()
        this.$message({ type: 'success', message: '删除成功' })
      } catch (e) {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      }
    }

  },
  async created () {
    const res = await getAllChannelListAPI()
    // console.log(res)
    this.channelList = res.data.data.channels
    this.getArticleList()
  }

}
</script>

<style></style>
